.dots-jumping {
  position: relative;
  left: calc(-9990px + 0.275em);
  width: 0.22em;
  height: 0.22em;
  border-radius: 5px;
  background-color: #848484;
  color: #848484;
  box-shadow: 9990px 0 0 0 #848484, calc(9990px + 0.44em) 0 0 0 #848484, calc(9990px + 0.8em) 0 0 0 #848484;
  animation: dots-jumping 1.5s infinite linear;
  bottom: -0.75em;
}

@keyframes dots-jumping {
  0% {
    box-shadow: 9990px 0 0 0 #848484, calc(9990px + 0.44em) 0 0 0 #848484, calc(9990px + 0.8em) 0 0 0 #848484;
  }
  16.667% {
    box-shadow: 9990px -6px 0 0 #848484, calc(9990px + 0.44em) 0 0 0 #848484, calc(9990px + 0.8em) 0 0 0 #848484;
  }
  33.333% {
    box-shadow: 9990px 0 0 0 #848484, calc(9990px + 0.44em) 0 0 0 #848484, calc(9990px + 0.8em) 0 0 0 #848484;
  }
  50% {
    box-shadow: 9990px 0 0 0 #848484, calc(9990px + 0.44em) -6px 0 0 #848484, calc(9990px + 0.8em) 0 0 0 #848484;
  }
  66.667% {
    box-shadow: 9990px 0 0 0 #848484, calc(9990px + 0.44em) 0 0 0 #848484, calc(9990px + 0.8em) 0 0 0 #848484;
  }
  83.333% {
    box-shadow: 9990px 0 0 0 #848484, calc(9990px + 0.44em) 0 0 0 #848484, calc(9990px + 0.8em) -6px 0 0 #848484;
  }
  100% {
    box-shadow: 9990px 0 0 0 #848484, calc(9990px + 0.44em) 0 0 0 #848484, calc(9990px + 0.8em) 0 0 0 #848484;
  }
}

.dots-flashing {
  position: relative;
  width: 0.45em;
  height: 0.45em;
  border-radius: 5px;
  background-color: var(--message-dots-color);
  color: var(--message-dots-color);
  animation: dots-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}

.dots-flashing::before,
.dots-flashing::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dots-flashing::before {
  left: -0.7em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 5px;
  background-color: var(--message-dots-color);
  color: var(--message-dots-color);
  animation: dots-flashing 1s infinite alternate;
  animation-delay: 0s;
}

.dots-flashing::after {
  left: 0.7em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 5px;
  background-color: var(--message-dots-color);
  color: var(--message-dots-color);
  animation: dots-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dots-flashing {
  0% {
    background-color: var(--message-dots-color);
  }
  50%,
  100% {
    background-color: var(--message-dots-color-fade);
  }
}
